﻿<template>
  <baseUI :isShow="myConfig.isShow" :label="myConfig.label" :showLabel="myConfig.showLabel"
  :labelSpan="myConfig.labelSpan" :isRequired="myConfig.isRequired" :showErrMsg="showErrMsg" :errMsg="errMsg"
  :commonConfig="commonConfig">
    <el-radio-group v-model="selectedValue"
    :size="commonConfig.size"
    :style = "myConfig.myStyle"
    :disabled = "!myConfig.isEnable"
    @change="handleChanged">
      <div v-if="myConfig.other.uiMode && myConfig.other.uiMode === 'button'">
        <el-radio-button v-for="(item, index) in options" :key="index" :label="item[valueKey]" >{{item[labelKey]}}</el-radio-button>
      </div>
      <div v-else-if="myConfig.other.uiMode && myConfig.other.uiMode === 'borderRadio'">
        <el-radio v-for="(item, index) in options" :key="index" :label="item[valueKey]" border>{{item[labelKey]}}</el-radio>
      </div>
      <div v-else>
        <el-radio v-for="(item, index) in options" :key="index" :label="item[valueKey]">{{item[labelKey]}}</el-radio>
      </div>
    </el-radio-group>
  </baseUI>
</template>
<script>
import baseComponent from '../baseComponent.vue'
import baseUI from '../baseUI.vue'
import {commonUse_defaultMethod} from '@/components/commonUse'
export default {
  components: {
    baseComponent, baseUI
  },
  extends: baseComponent,
  mounted () {
    this.init(this.config)
    if (!this.isDesignMode) {
      this.load()
    }
  },
  data () {
    return {
      options: [{
        code: '1',
        value: '选项1'
      }],
      valueKey: 'code',
      labelKey: 'value',
      selectedText: ''
    }
  },
  methods: {
    isDataComponent () {
      return true
    },
    setValue (val) {
      if (this.selectedValue !== val) {
        this.selectedValue = val
        this.getText()
      }
    },
    getText () {
      let self = this
      let item = this.options.find(v => {
        return v[self.valueKey] === self.selectedValue
      })
      if (item) {
        this.selectedText = item[self.labelKey]
      } else {
        this.selectedText = ''
      }
      return this.selectedText
    },
    load (data) {
      this.options = []
      if (this.myConfig.other.dataSource && this.myConfig.other.dataSource.mode === 'remote') {
        let self = this
        if (this.myConfig.other.dataSource.remoteCategory === 'Dictionary') {
          if (this.myConfig.other.dataSource.DicSettings.table) {
            self.valueKey = self.myConfig.other.dataSource.DicSettings.valueKey
            self.labelKey = self.myConfig.other.dataSource.DicSettings.labelKey
            this.$api.query('/dictionaryset/pop/' + this.myConfig.other.dataSource.DicSettings.table).then(data => {
              self.options = data
            })
          }
        } else if (this.myConfig.other.dataSource.remoteCategory === 'MetaPop') {
          if (self.myConfig.other.dataSource.MetaPopSettings.table &&
              self.myConfig.other.dataSource.MetaPopSettings.column) {
            let orderExpress = {}
            if (self.myConfig.other.dataSource.MetaPopSettings.orderList) {
              self.myConfig.other.dataSource.MetaPopSettings.orderList.forEach((item, index) => {
                if (Object.keys(orderExpress).indexOf(item.column) < 0) {
                  orderExpress[item.column] = 'asc'
                }
                orderExpress[item.column] = item.direction
              })
            }
            this.$api.mdFormQueryPop({
              id: self.myConfig.other.dataSource.MetaPopSettings.table,
              column_name: self.myConfig.other.dataSource.MetaPopSettings.column,
              limit: 1000,
              fixed_orderby_express: orderExpress,
              this_data: this.getDataObjFromPageModel(),
              ref_data: this.parentModel
            }).then(data => {
              self.valueKey = data.column_value
              if (data.column_text) {
                self.labelKey = data.column_text
              } else if (data.column_show && data.column_show.length > 0) {
                self.labelKey = data.column_show[0].column_name
              } else {
                self.labelKey = data.column_value
              }
              self.options = data.data
            })
          }
        } else if (this.myConfig.other.dataSource.remoteCategory === 'Meta') {
          if (self.myConfig.other.dataSource.MetaSettings.table &&
              self.myConfig.other.dataSource.MetaSettings.valueKey &&
              self.config.other.dataSource.MetaSettings.labelKey) {
            self.valueKey = self.myConfig.other.dataSource.MetaSettings.valueKey
            self.labelKey = self.myConfig.other.dataSource.MetaSettings.labelKey
            let filterExpress = {}
            let orderExpress = {}
            if (self.myConfig.other.dataSource.MetaSettings.filterList) {
              self.myConfig.other.dataSource.MetaSettings.filterList.forEach((item, index) => {
                if (Object.keys(filterExpress).indexOf(item.column) < 0) {
                  filterExpress[item.column] = {}
                }
                let v = commonUse_defaultMethod(item.value, this.getDataObjFromPageModel(), null, null, this.parentModel)
                filterExpress[item.column][item.condition] = v
              })
            }
            if (self.myConfig.other.dataSource.MetaSettings.orderList) {
              self.myConfig.other.dataSource.MetaSettings.orderList.forEach((item, index) => {
                if (Object.keys(orderExpress).indexOf(item.column) < 0) {
                  orderExpress[item.column] = 'asc'
                }
                orderExpress[item.column] = item.direction
              })
            }
            this.$api.mdFormQuery({
              id: self.myConfig.other.dataSource.MetaSettings.table,
              limit: 100,
              fixed_filter_express: filterExpress,
              fixed_orderby_express: orderExpress
            }).then(data => {
              self.options = data.data
            })
          }
        } else if (this.myConfig.other.dataSource.remoteCategory === 'API') {
          let parameters = {}
          this.config.other.dataSource.APISettings.input_header.forEach(el => {
            parameters[el.key] = commonUse_defaultMethod(el.value, this.getDataObjFromPageModel(), null, null, this.parentModel)
          })
          this.config.other.dataSource.APISettings.input_path.forEach(el => {
            parameters[el.key] = commonUse_defaultMethod(el.value, this.getDataObjFromPageModel(), null, null, this.parentModel)
          })
          this.config.other.dataSource.APISettings.input_querystring.forEach(el => {
            parameters[el.key] = commonUse_defaultMethod(el.value, this.getDataObjFromPageModel(), null, null, this.parentModel)
          })
          this.config.other.dataSource.APISettings.input_postdata.forEach(el => {
            parameters[el.key] = commonUse_defaultMethod(el.value, this.getDataObjFromPageModel(), null, null, this.parentModel)
          })
          this.$api.excuteDFormEvent(this.config.other.dataSource.APISettings.api_uid, {}, parameters).then(data => {
            this.valueKey = this.config.other.dataSource.APISettings.valueKey ? this.config.other.dataSource.APISettings.valueKey : 'code'
            this.labelKey = this.config.other.dataSource.APISettings.labelKey ? this.config.other.dataSource.APISettings.labelKey : 'label'
            if (this.config.other.dataSource.APISettings.dataObject) {
              let arr = this.config.other.dataSource.APISettings.dataObject.split('.')
              let obj = data
              arr.forEach(key => {
                obj = data[key]
              })
              this.options = obj
            } else {
              this.options = data
            }
          })
        }
      } else if (this.myConfig.other.dataSource && this.myConfig.other.dataSource.mode === 'static') {
        this.valueKey = 'value'
        this.labelKey = 'label'
        this.options = this.myConfig.other.dataSource.staticOptions
      }
    },
    handleChanged () {
      this.onChange()
    }
  },
  watch: {
    'config.other.dataSource.preview': {
      handler: function (val, oldVal) {
        if (val && this.isDesignMode) {
          this.selectedValue = ''
          this.load()
        }
      },
      deep: true
    }
  }
}
</script>
<style>
</style>
